<template>
  <div class="g-wrapper">
    <main-header></main-header>
    <main-sidebar></main-sidebar>
    <div class="g-main">
      <div class='g-main-view'>
        <el-tabs v-model="tabsName" @tab-click='tabClick' class='m-main-tabs'>
          <el-tab-pane
            v-for="v in getTabRoutes" 
            :key='v.name'
            :name='v.name'>
            <div slot='label' class='g-main-tabItem'>
              <p>{{ v.title }}</p><span class='close u-icon' @click='closeTab(v, $event)'></span>
            </div>
          </el-tab-pane>
        </el-tabs>
        <transition name='fade' mode='out-in'>
          <keep-alive :include='getTabRoutesForString'>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import mainHeader from './header.vue'
import mainSidebar from './sidebar.vue'
import publicTitle from '@/components/publicTitle.vue'
import close_icon from '@/assets/icon/form_list_icon_delete@2x.png'

export default {
  name: 'home',

  components: {
    mainHeader,
    mainSidebar,
    publicTitle
  },

  computed: {
    ...mapGetters(['getTabRoutes', 'getTabRoutesForString'])
  },

  data() {
    return {
      username: 'xx',
      title: '',
      tabsName: '',
      close_icon
    }
  },

  watch: {
    $route(to) {
      this.title = to.meta.title
      this.tabsName = to.name
    }

    // getMenuIndex() {
    //   this.tabsName = this.getMenuIndex
    // }
  },

  created() {
    this.title = this.$route.meta.title
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    closeTab(v, e) {
      e.stopPropagation()
      this.setTabRoutes({ type: 'remove', obj: { name: v.name } })
      if (this.getTabRoutes.length === 0) {
        return this.$router.push({ name: 'main' })
      }
      this.$router.push({ name: this.getTabRoutes[this.getTabRoutes.length - 1].name })
    },

    tabClick() {
      const obj = this.getTabRoutes.filter(v => v.name === this.tabsName)[0]
      console.log(obj)
      this.$router.push({ name: this.tabsName, query: obj.query || {} })
    }
  }
}
</script>

<style lang="less">
.g-globalHelp {
  position: fixed;
  z-index: 100;
  right: 25px;
  bottom: 25px;
  border: 1px solid #607d8b;
  background: #fff;
  border-radius: 50%;
  fill: #607d8b;
  cursor: pointer;
  &:hover, &.active {
    background: #607d8b;
    fill: #fff;
  }
}

.g-main-tabWrap {
  width: 100%;
  display: flex;
  border-bottom: solid 1px #bebebe;
  margin-bottom: 20px;
}

// .m-main {
//   &-tabs {
//     .is-active {
//     }
//   }
// }

.g-main-tabItem {
  // max-width: 300px;
  flex: 1;
  text-align: center;
  // padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    padding-right: 10px;
  }
  .close {
    background-image: url(./../../assets/icon/form_list_icon_delete@2x.png);
  }
}

</style>
